<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>拖拽--带框</title>
   <style>
   #div1{width:100px;height:100px;background:red;position:absolute;}
   .box{border:1px dashed black;position:absolute;}
   </style>
   <script>
   window.onload=function(){
       var oDiv=document.getElementById("div1"); 
	   var disX=0;
	   var disY=0;
	   oDiv.onmousedown=function(ev){
	      var oEvent=ev||event;
		  disX=oEvent.clientX-oDiv.offsetLeft;
		  disY=oEvent.clientY-oDiv.offsetTop;
		  
		  //在鼠标按下的时候，创建一个新的DIV，并且class='box'
		  var oBox=document.createElement('div');
		  oBox.className='box';
		  oBox.style.width=oDiv.offsetWidth-2+'px';
		  oBox.style.height=oDiv.offsetHeight-2+'px';
		  oBox.style.left=oDiv.offsetLeft+'px';
		  oBox.style.top=oDiv.offsetTop+'px';
		  //将新创建的div放入body中
		  document.body.appendChild(oBox);
		  
		  document.onmousemove=function(ev){
		     var oEvent=ev||event;
			 var l=oEvent.clientX-disX;
			 var t=oEvent.clientY-disY;
			 oBox.style.left=l+'px';
			 oBox.style.top=t+'px';
		  };
		  document.onmouseup=function(){
		     document.onmousemove=null;
			 document.onmouseup=null;
			 //当鼠标松开之后，将oBox的值给oDiv，这样实现了拖拽
			 oDiv.style.left=oBox.offsetLeft+'px';
			 oDiv.style.top=oBox.offsetTop+'px';
			 document.body.removeChild(oBox);
		  };
	      return false;
	   };
	   
   };
   </script>
</head>
<body>
 <div id="div1"></div>

</body>
</html>